<template>

    <el-card>
        <el-form ref="ruleFormRef" :model="formItem" :rules="rules" label-width="88" require-asterisk-position="right">
            <el-row>
                <el-col :span="8">

                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="formItem.name" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="身份证号" prop="IDnumber">
                        <el-input v-model="formItem.IDnumber" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="性别">
                        <el-select v-model="formItem.gender" placeholder="请选择">
                            <el-option label="请选择" value="" />
                            <el-option label="男" value="0" />
                            <el-option label="女" value="1" />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="出生年月" prop="birthday">
                        <el-date-picker v-model="formItem.birthday" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" size="default" style="width: 200px;height: 40px;"/>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="手机号码" prop="phone">
                        <el-input v-model="formItem.phone" placeholder="居民登录账号, 请正确填写" clearable />
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="现居地" prop="address">
                        <el-input v-model="formItem.address" placeholder="请输入" clearable />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="居民标签" prop="tags">
                        <!-- <el-input v-model="formItem.tags" clearable /> -->
                        <el-select v-model="formItem.tagIds" placeholder="请选择" clearable>
                          <el-option v-for="item in TagsData.rows" :key="item._id" :label="item.name"
                                :value="item._id" />
                            
                        </el-select>
                    </el-form-item>
                </el-col>
               
                <el-col :span="8">
                    <el-form-item label="登录密码" prop="password">
                        <el-input v-model="formItem.password" placeholder="8位以上的数字和字母组合" type="password" clearable />
                    </el-form-item>
                </el-col>
            </el-row>

            <div style="display: flex;">

                <!-- <el-button @click="onAddUser(ruleFormRef)" type="primary">保存</el-button> -->
                <el-button @click="onAddResident" type="primary">保存</el-button>

                <el-button type="primary" @click="addThenToUpdate">完善居民档案</el-button>


                <el-button type="primary" @click="message">立即签约</el-button>

                <el-button @click="$router.back()">返回</el-button>

            </div>
        </el-form>
    </el-card>

</template>

<script setup>
import { onMounted, reactive, ref } from 'vue';
import { addResidentsApi } from '../../../api/residents';
import { useFindData } from '../../../composables/findData';
import { useRouter } from 'vue-router';

const router = useRouter()
const formItem = ref({});
const ruleFormRef = ref();
const { TagsData, findTagsAsync } = useFindData()

// todo
function message(){
    ElMessage.success('待确定跳转路由')
}

onMounted(()=>{
    findTagsAsync()
})

// // 表单验证规则
const rules = reactive({
    name: [
        // 必填（内容不能为空）
        { required: true, message: '用户昵称不能为空', trigger: 'blur' },
        // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
    phone: [
        // 必填（内容不能为空）
        { required: true, message: '手机号不能为空', trigger: 'blur' },
        {
            // validator验证方法
            validator(_, value) {
                const phoneRegExp = /^1[3456789]\d{9}$/
                return phoneRegExp.test(value);
            },
            message: '手机号格式不正确',
            trigger: 'blur'
        },
    ],
    password: [
        // 必填（内容不能为空）
        { required: true, message: '密码不能为空', trigger: 'blur' },
    ],
    confirmPassword: [
        // 验证规则一：必填（内容不能为空）
        { required: true, message: '确认密码不能为空', trigger: 'blur' },
        // 验证规则二：两次密码是否一致
        {
            validator(_, value) {
                // 判断value（确认密码）和password（密码）是否相等
                return value == formItem.value.password;
            },
            message: '两次密码不一致',
            trigger: 'blur'
        },
    ],
})

// 跳转完善居民档案页面
async function addThenToUpdate() {
    const response = await addResidentsApi({...formItem.value});
    if(response.code==200){
        router.push({path:'/admin/resident/update',query:{_id:response.data._id}})
    }
}


async function onAddResident() {
    const response = await addResidentsApi({
        ...formItem.value
    });
    if(response.code==200){
        ElMessage({
        type: 'success',
        message: '保存成功',
      })
      
    }else{
        ElMessage({
            type:'error',
            message:'保存失败'
        })
      }
}

// // 确认添加
// async function onAddUser(formEl) {
//     if (!formEl) return;
//     await formEl.validate((valid, fields) => {
//         if (valid) {
//             // 表单中所有的验证规则都通过
//             console.log('submit!')
//         } else {
//             console.log('error submit!', fields)
//         }
//     })
// }
</script>

<style lang="scss" scoped>
.el-input,
.el-select {
    width: 200px;
    height: 40px;
}

</style>